import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Table, Divider, message, Popconfirm } from 'antd';
import Form from './components/SearchForm';
import { lock } from './service';
import { checkInit } from '@/utils/util';
import { UmiComponentProps, BaseComponentProps } from '@/common/type';

export interface P {
  list: {
    data: Array<any>,
    dataCnt: number
  },
}

type Props = P & UmiComponentProps & BaseComponentProps;

@connect(({ message_content, loading, menu }) => ({
  list: message_content.list || {},
  buttons: menu.buttons || [],
  cond: menu.cond || [],
  loading: loading.effects['message_content/queryPage']
}))
class Position extends Component<Props, any> {
  constructor(props) {
    super(props);
    this.initCurrent = this.initCurrent.bind(this);
  }
  state = {
    current: 1
  };

  queryData(offset = 1) {
    const { dispatch } = this.props;
    dispatch({
      type: 'message_content/queryPage',
      payload: {
        pageNum: offset,
      },
    });
  }

  initCurrent() {
    this.setState({
      current: 1
    })
  }

  delConfirm(data) { // 删除
    let tipMsg = message.loading('');
    return lock(data.id).then(() => {
      tipMsg();
      message.success('操作成功', 1.5);
      this.queryData();
    }, tipMsg);
  }

  private onShowSizeChange = (current: number, pageSize: number) => {
    const { dispatch, cond } = this.props;
    cond.pageSize = pageSize;
    dispatch({ type: `message_content/updateCond`, payload: cond })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    checkInit() ? dispatch({ type: `message_content/initCond` }) : this.queryData();
  }

  render() {
    const { buttons } = this.props;
    const btnList = {};

    if (Array.isArray(buttons)) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }

    const { data = [], dataCnt } = this.props.list;
    const ans = Array.isArray(data) ? data.map((item, index) => ({
      key: index,
      id: item.id,
      title: item.title ? item.title : ' ',
      creatorName: item.creatorName ? item.creatorName : '',
      positionNameList: item.positionNameList ? item.positionNameList.join('、') : ' ',
      statusName: item.statusName ? item.statusName : ' ',
      createTime: item.createTime ? item.createTime : ' ',
      sendTime: item.timingSendTime ? item.timingSendTime : item.sendTime
    })) : [];

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: this.onShowSizeChange,
      showSizeChanger: true,
      onChange: (current: number) => {
        this.setState({ current }, () => this.queryData(current));
      },
    };

    const columns = [
      {
        title: '序号',
        dataIndex: 'idNum',
        key: 'idNum',
        render: (text, record, index) => index + 1 < 10 ? `0${index + 1}` : index + 1
      },
      {
        title: '标题',
        dataIndex: 'title',
      }, {
        title: '创建人',
        dataIndex: 'creatorName',
      }, {
        title: '接收角色',
        dataIndex: 'positionNameList',
      }, {
        title: '状态',
        dataIndex: 'statusName',
      }, {
        title: '创建时间',
        dataIndex: 'createTime',
      }, {
        title: '发送时间',
        dataIndex: 'sendTime',
      }, {
        title: '操作', key: 'x', render: (record) => {
          return (
            <div style={{ display: 'flex' }}>
              {
                btnList['查看'] ? <>
                  <Link to={`/data/message_content/${record.id}/details`}>查看</Link>
                  <Divider type="vertical" />
                </> : null
              }
              {
                btnList['删除'] ? <>
                  <Popconfirm title="请确认是否删除?" onConfirm={() => this.delConfirm(record)} okText="确定" cancelText="取消">
                    <a>删除</a>
                  </Popconfirm>
                </> : null
              }
            </div>
          )
        }
      }];
    return (
      <div>
        <Form current={this.state.current} initCurrent={this.initCurrent} new={!!btnList['新增']} />
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={ans}
          bordered
          loading={this.props.loading}
        />
      </div>
    );
  }
}

export default Position;
